<template>
	<div class="wrapper">
		<img src="@/components/img/duigou.png" alt="对勾" style="width: 80px;margin: 26px auto;"/>
		<div class="head-text" style="font-size: 28px;margin: 10px auto;">订单创建成功</div>
		<div class="main-text" style="margin: 50px 360px;">
			<div style="margin-bottom: 18px;">订单号：</div>
			<div style="margin-bottom: 18px;">订单总金额：</div>
			<div style="margin-bottom: 18px;">订单状态：
			<el-button type="primary" plain size="small">待支付</el-button>			
			</div>

			<div style="margin-bottom: 18px;">订单创建时间：</div>		
		</div>
		<div class="btns" >
			<el-button @click="goOrders">返回订单</el-button>
			<el-button type="primary" @click="goToPay">立即支付</el-button>			
		</div>

	</div>
	
</template>

<script setup>
	import { useRouter } from 'vue-router'
	const router = useRouter();
	const goOrders = ()=>{
		router.push('/orders');
	}
	const goToPay =()=>{
		router.push('/paid-method')
	}
</script>

<style lang="scss" scoped>
	.wrapper{
		display: flex;
		flex-direction: column;		
		.btns{
			display: flex;
			margin-left: 620px;
		}
		.el-button:first-child {
		  flex-grow: 0.08;
		}
		.el-button:last-child {
		  flex-grow: 0.08;
		}
		.main-text{
			font-size: 18px;
			font-weight: 580;
		}
	}
</style>